<template>
	<div class="Judge-components">
		<div v-if="data.questionAnswerContent && explain">
			<p class="ques-title">{{ data.questionAnswerContent.judge }}</p>
			<van-radio-group v-model="answer">
				<van-radio
					:class="[data.questionAnswerContent.score ? 'right-one' : 'error-one']"
					disabled
					:name="true"
					>正确</van-radio
				>
				<van-radio
					:class="[data.questionAnswerContent.score ? 'right-one' : 'error-one']"
					disabled
					:name="false"
					>错误</van-radio
				>
			</van-radio-group>
			<p
				class="ques-title"
				style="font-weight: bold"
				v-show="!data.questionAnswerContent.score"
			>
				正确答案：
				<span style="color: #56baca">{{
					data.questionAnswerContent.answer ? "正确" : "错误"
				}}</span>
			</p>
		</div>
		<div v-if="data.content && !explain">
			<p class="ques-title">{{ data.content.judge }}</p>
			<van-radio-group v-model="answer">
				<van-radio :name="true">正确</van-radio>
				<van-radio :name="false">错误</van-radio>
			</van-radio-group>
			<slot></slot>
		</div>
	</div>
</template>
<script>
export default {
	name: "Judge",
	props: {
		data: {
			type: Object,
			default: {},
		},
		explain: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			answer: "",
		};
	},
	watch: {
		data: {
			handler(newV, oldV) {
				this.initState();
			},
			deep: true,
		},
	},
	mounted() {
		this.initState();
	},
	methods: {
		initState() {
			if (this.explain) {
				if (this.data.questionAnswerContent) {
					this.answer = this.data.questionAnswerContent.studentAnswer;
				} else {
					this.filterRight();
				}
			} else {
				this.answer = this.data.answer;
			}
		},
		filterRight() {
			this.data.questionAnswerContent = JSON.parse(JSON.stringify(this.data.questionContent));
			this.data.questionAnswerContent.studentAnswer = "";
		},
		computeScore() {
			var score = 0;
			var content = JSON.parse(JSON.stringify(this.data.content));
			content.score = this.answer === content.answer ? this.data.questionScore : 0;
			content.studentAnswer = this.answer;
			content.finish = this.$isFull(this.answer);
			score = this.answer === content.answer ? this.data.totalScore : 0;
			return { content, score };
		},
		changeValue(key) {
			var { content, score } = this.computeScore();
			console.log(score);
			this.$emit("changeValue", this.answer, content, score);
		},
	},
};
</script>

<style lang="scss">
.Judge-components {
	.flex {
		display: flex;
		align-items: center;
		color: #fff;
	}
	.van-switch {
		margin: 15px;
	}
}
</style>
